<template>
  <div class="majorEquipment">
    <el-row class="h100">
      <el-col :span="6" class="h100">
        <div class="text-border">
          <div class="text-header">
            已选择：
            <span>{{ choseNumber() }}</span>
          </div>
          <div class="right">
            <el-row :gutter="30" style="margin-bottom: 10px" v-if="multiple">
              <el-col :span="8" style="text-align: right">
                <el-button
                  icon="el-icon-delete"
                  size="mini"
                  class="clearBtn"
                  @click="clearAll"
                  >清空</el-button
                >
              </el-col>
            </el-row>
            <div
              v-for="(i, index) in chosedData"
              :key="index"
              class="chosedSelect"
              :class="{ isActive: i.id == currentId }"
              @click="clickChosed(i)"
            >
              <span>
                <label>{{ i.name }}</label>
              </span>
              <i
                @click="delItem(index, i)"
                class="el-icon-circle-close select-icon-close"
              ></i>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="6" class="h100">
        <div class="text-border">
          <div class="text-header tree-header">
            <span>{{ treeName }}</span>
          </div>
          <div class="left">
            <backupTree
              ref="tree"
              :treeSetting="treeSetting"
              @handleClickTree="handleClickTree"
              :filterNode="filterNode"
              >
              <template slot="treeIcon">
                <i class="el-icon-map-location" title="分类下存在未绑定设备的备件" style="color: red"></i>
              </template>
            </backupTree>
          </div>
        </div>
      </el-col>
      <el-col :span="12" class="h100">
        <div class="text-border">
          <div class="text-header">{{ title }}</div>
          <div class="search" v-if="false">
            <el-input
              placeholder="输入关键字过滤"
              size="mini"
              class="treeInput"
              v-model="filterText"
              suffix-icon="el-icon-search"
              clearable
            ></el-input>
          </div>
          <div class="middle">
            <tableList
              ref="klTable"
              v-bind="tableConfig"
              @selectAll="selectAll"
              @selectChange="selectChange"
              @radioSelect="radioSelect"
              :tableData="tableData"
              :nodeId="nodeId"
              :arrId="arrId"
            ></tableList>
          </div>
        </div>
      </el-col>
      
    </el-row>
  </div>
</template>

<script>
import {
  getTree, // 获取分类数据
  serchEqBackup
} from "@/api/equipmentLedger/equipmentBackup.js"
import tableList from "./tableList.vue";
import backupTree from "./backupTree.vue"
export default {
  components: {
tableList,backupTree
  },
  data() {
    return {
      title: "备品列表",
      treeName: "备品备件结构",
      treeData: [],
      radio: { name: "" }, // 选中数据
      treeSetting: {
        data: [],
        defaultProps: {
          children: "children",
          label: "name",
        },
        expandAll: true,
      },
      tableConfig: {
        radioShow: false,
        showAllSearch: true,
        showIndex: false,
        selectionShow: true,
        showFilterBtn: false,
        showCustomBtn: false,
        rowKey: "id",
        type: "device",
        searchObj: {
          searchMethod: (params, sortStr) => {
            this.getTableData(params, sortStr);
          },
          searchArr: [],
          queryData: {
            page: 1,
            pageSize: 15,
          },
        },
        tableMethods: {
          rowClick: (row) => {
              if (this.multiple) {
                let res = this.chosedData.every((item) => {
                  return item.id != row.id;
                });
                this.selectChange(res, row);
              } else {
                this.$refs.klTable.radioSelect(row);
              }
              this.$refs.klTable.toggleRowSelection(row);
          },
        },
        selectableMethod: (row, rowIndex) => {
            return true;
        },
        isDisabled: (row) => {
          if (
            row.isVirtual == "0" &&
            this.isSelect(row) &&
            !this.defaultIds.includes(row.id)
          ) {
            return false;
          } else {
            return true;
          }
        },
        actionList: [],
        column: [
          {
            label: "名称",
            prop: "name",
            showTooltip: true,
          },
          {
            label: "型号",
            prop: "type",
            showTooltip: true,
          },
          {
            label: "适用设备",
            prop: "backApply",
            sortable: "custom",
            formatter: arr=>{
              let str = '';
              str = arr.backApply.map((i) => i.equip_name).join(", ");
              return str;
            },
            showTooltip: true,
          },
        ],
        tableData: [],
        paginationObj: {
          pageSizes: [15, 30, 50, 100],
        },
        totalNumber: 0,
        showPagetion: false,
        pageSmall: true,
      },
      multiple: true,
      tableData:[],
      filterData: [],
      chosedData: [],
      defaultIds: [],
      currentId: "",
      filterText: "",
      choseFilter: "",
      filterConfig: "",
      equipmentFilter: {},
      arrId: [],
      nodeId: "",
    };
  },
  created(){
    this.getTreeData();
    this.filterData = JSON.parse(JSON.stringify(this.chosedData));
  },
  methods: {
    handleClickTree(node) {
      this.nodeId = node.id;
      this.orgCode = node.id;
      this.arrId = [];
      this.arrId.push(node.id);
      // if(node.children.length){
      //   node.children.map(i=>{
      //     this.arrId.push(i.id);
      //     if(i.children.length){
      //       i.children.map(j=>{
      //         this.arrId.push(j.id);
      //       })
      //     }
      //   })
      // }
    },
  //获取组织树数据
    getTreeData() {
      serchEqBackup().then(res=>{
        this.$set(this.tableConfig, "tableData", res.data.list);
        // this.tableConfig.tableData = res.data.list;
        this.tableData = res.data.list;
      })
      let data = {
      parent_id: 0
    }
      //得到组织树的数据
      getTree(data).then(
        (res) => {
            // this.orgCode = res.data.list[0].id;
            this.$refs.tree.setTreeData(res.data);
            this.filterListTable(this.filterText);
        },
        (error) => {
          this.$message.error(error);
        }
      );
    },
        //添加或取消已选用户
    selectChange(selected, row) {
      if (selected) {
        let hasSame = false;
        this.chosedData.forEach((item, index) => {
          if (item.id == row.id) {
            hasSame = true;
            this.chosedData.splice(index, 1, row);
            let onceData = this.tableConfig.tableData.find((child) => {
              return child.id == item.id && child.orgId == item.orgId;
            });
            let len = this.tableConfig.tableData.filter(
              (child) => child.id == row.id
            );
            if (len.length > 1) {
              this.$refs.klTable.selectionCalce(onceData);
            }
            //
          }
        });
        if (!hasSame) {
          this.chosedData.push(row);
        }
      } else {
        this.chosedData.forEach((item, i) => {
          if (item.id == row.id) {
            this.chosedData.splice(i, 1);
            return;
          }
        });
      }
    },
     //筛选树
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
     //选择全部
    selectAll(list) {
      this.tableConfig.tableData.forEach((item, i) => {
        if (!item.disabled) {
          this.selectChange(list, item);
        }
      });
    },
    clickChosed(i) {
      this.currentId = i.id;
    },
     //点击移除的时候触发
    delItem(index, row) {
      if (this.multiple) {
        this.chosedData.forEach((item, i) => {
          if (row.id == item.id) {
            this.chosedData.splice(i, 1);
          }
        });
        this.tableConfig.tableData.map((item) => {
          if (item.id === row.id) {
            this.$refs.klTable.selectionCalce(item);
          }
        });
      } else {
        this.chosedData.splice(index, 1);
        this.filterData.splice(index, 1);
        this.$refs.klTable.radioClick(null);
      }
    },
    //选择人员或组织数量
    choseNumber() {
      if (["user-select", "user"].includes(this.type)) {
        return `${this.chosedData.length}人`;
      } else {
        return `${this.chosedData.length}个`;
      }
    },
    //清除所有
    clearAll() {
      this.chosedData.length = 0;
      this.chosedData = []
      this.filterData = [];
      this.$refs.klTable.clearSelection();
    },
    radioSelect(row) {
      this.chosedData = [row];
    },
    //过滤已选人员
    filterChoseData(val) {
      let reg = new RegExp(val);
      this.filterData = this.chosedData.filter((item) => {
        return item.name.match(reg);
      });
    },
    //过滤设备列表
    filterListTable(val) {
      let reg = new RegExp(val);
      let data = this.tableData.filter((item) => {
        return item.name.match(reg);
      });
      this.tableData = data;
    },
    //返回选择的数据
    getSelectData() {
      let data = JSON.parse(JSON.stringify(this.chosedData));
      return data;
    },
  },
    watch: {
    filterText(val) {
      this.filterListTable(val);
    },
    choseFilter(val) {
      this.filterChoseData(val);
    },
    chosedData(val) {
      this.filterChoseData(this.choseFilter);
    },
  }
}
</script>

<style lang="less" scoped>
  .majorEquipment {
  height: calc(100% - 15px);
  /deep/.el-input--mini .el-input__inner {
    height: 32px;
    line-height: 32px;
  }
  .search {
    width: 40%;
    margin: 0 0 10px 10px;
  }
  .text-border {
    position: relative;
    height: 100%;
    margin: 5px;
    border: 1px #ebebeb solid;
    .text-header {
      height: 40px;
      line-height: 40px;
      padding: 0 14px;
      border-bottom: 1px #ebebeb solid;
      text-align: left;
      font-weight: 700;
      color: #666;
    }
    .tree-header {
      display: flex;
      justify-content: space-between;
    }
    .text-header:first-child {
      margin-bottom: 15px;
    }
    .left {
      height: calc(100% - 40px);
    }
    .middle {
      padding: 0 10px 10px 10px;
      height: calc(100% - 115px);
    }
    .right {
      height: calc(100% - 35px);
      padding: 0 10px;
      .chosedSelect {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 4px 10px;
        line-height: 23px;
      }
      .clearBtn {
        border: 1px solid #0d60b4;
        color: #0d60b4;
      }
      .isActive {
        background-color: #f8f8f8;
      }
    }
    .table-input {
      width: 95% !important;
      margin: 0 auto;
      .tableInputLeft {
        float: left;
        width: 35%;
      }
      .tableInputRight {
        float: right;
        width: 60%;
      }
      .tableInputLeft,
      .tableInputRight {
        height: 30px;
        line-height: 30px;
        border-radius: 2px;
        margin-bottom: 15px;
      }
    }
    .clearF::after {
      content: "";
      display: table;
      height: 0;
      clear: both;
      visibility: hidden;
    }
    .select-text {
      float: left;
      margin-left: 10px;
      height: 20px;
      line-height: 12px;
    }
    .select-icon-close {
      float: right;
      margin-right: 10px;
    }
  }
  .outOrg {
    margin-left: 10px;
    background: rgba(250, 162, 36, 0.2);
    //color: #FAA224 ;
    opacity: 0.2;
    color: black;
    border-radius: 4px;
    padding: 1px 4px;
  }
  .interim {
    margin-left: 10px;
    background: rgba(239, 76, 76, 0.2);
    opacity: 0.2;
    border-radius: 4px;
    padding: 1px 8px;
    color: red;
  }
}
</style>